<template>
  <div class="full flex-row" style="border-radius: 8px; border: 1px solid #D8E0F0 ; ">
    <div class="flex_1 flex-row">
      <!--      <el-input size="large" style="height: 48px; margin: 0; padding: 0; color: black; width: 60px;"-->
      <!--      ></el-input>-->
      <el-input v-model="value" @change="handleChange"/>
      <div class="comm_split_v"></div>
      <div class="flex-col">
        <div class="flex-col-center">
          <el-button link size="small" :icon="ArrowUp" em/>
          <div class="comm_split_h"></div>
          <el-button link size="small" :icon="ArrowDown" circle/>
        </div>

      </div>
      <div class="comm_split_v"></div>
      <div class="flex-row-center" style="padding: 0 8px;"><span>分</span></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
import {ref, watch} from 'vue'


// import ElementPlus or other UI library components here if needed

interface Props {
  modelValue?: string; // define the prop name for binding value
}

const props = defineProps({
  score: {
    type: Number,
    required: true,
    default: 0,
  },
  index: {
    type: Number,
    default: 0,
  }
});

const emit = defineEmits(['update:score']); // define event to update parent component's data


let value = ref(props.score); // create a reactive variable for storing input value
console.log('value', value);
const index = props.index; // create a reactive variable for storing input value
watch(
    () => props.score,
    (val, old) => {
      value.value = val;
      console.log(val, old)
    }
)
const handleChange = (event: string) => {
  let num = 0;
  try {
    num = parseInt(event);
  } catch (e) {

  }
  console.log('handleChange', num)
  emit('update:score', num, index);
}


</script>

<style scoped>

.edit /deep/ .el-input__inner {
  border: 0;
  box-shadow: 0 0 0 0px;
}
</style>